<template>
  <div id="all-mv">
    <div class="font-20 font-weight mtop-10">全部MV</div>
    <div class="filtrate-list">
      <span class="tag-name font-16 mright-10">
        地区：
      </span>
      <a-radio-group
        @change="event => change('area', event)" 
        :value="params.area"
      >
        <a-radio-button
          v-for="area in catList.area"
          :value="area"
          :key="area"
        >
          {{ area }}
        </a-radio-button>
      </a-radio-group>
    </div>
    <div class="filtrate-list">
      <span class="tag-name font-16 mright-10">
        类型：
      </span>
      <a-radio-group
        @change="event => change('type', event)" 
        :value="params.type"
      >
        <a-radio-button
          v-for="type in catList.type"
          :value="type"
          :key="type"
        >
          {{ type }}
        </a-radio-button>
      </a-radio-group>
    </div>
    <div class="filtrate-list">
      <span class="tag-name font-16 mright-10">
        排序：
      </span>
      <a-radio-group
        @change="event => change('order', event)" 
        :value="params.order"
      >
        <a-radio-button
          v-for="order in catList.order"
          :value="order"
          :key="order"
        >
          {{ order }}
        </a-radio-button>
      </a-radio-group>
    </div>
    <MvList
      v-for="item in mvList"
      :key="item.id"
      :playcount="item.playCount"
      :cover="item.cover"
      :videoAuthor="item.artists"
      :videoTitle="item.name"
      :durationms="item.duration"
      @goDetail="event => goDetail(event, item.id)"
    ></MvList>
    <!-- 加载更多 -->
    <LoadingMore :more="mvMore" @scrollMore="getAllMV" />
  </div>
</template>

<script>
import { Radio } from 'ant-design-vue';
import { allMV } from '@/api/music';
import LoadingMore from '@/components/Library/LoadingMore';
import MvList from '@/components/Content/MvList';

export default {
  name: 'allMv',

  components: {
    MvList,
    LoadingMore,
    ARadioGroup: Radio.Group,
    ARadioButton: Radio.Button
  },

  data() {
    return {
      catList: {
        area: ['全部', '内地', '港台', '欧美', '日本', '韩国'],
        type: ['全部', '官方版', '现场版', '网易出品'],
        order: ['上升最快', '最热', '最新']
      },
      params: {
        area: '全部',
        type: '全部',
        order: '最新',
        limit: 16,
        offset: 0,
        timestamp: new Date().getTime()
      },
      scroll: 0,
      mvList: [],
      mvMore: true
    }
  },

  watch: {
    '$route.query': {
      handler(value) {
        const { area, type } = value;
        if (
          area &&
          this.catList.area.findIndex(item => item === area) !== -1
        ) {
          this.params.area = area;
        }
        if (
          type &&
          this.catList.type.findIndex(item => item === type) !== -1
        ) {
          this.params.type = type
        }
        this.getAllMV();
      },
      immediate: true
    }
  },

  methods: {
    // 获取全部MV
    async getAllMV() {
      // 需要累加分页
      this.params.offset = this.scroll++ * this.params.limit;
      console.log(this.params);
      const res = (await allMV(this.params)).data;
      this.mvList.push(...res.data);
      this.mvMore = res.hasMore;
    },
    // 转中文标题
    tagTitle(key) {
      switch (key) {
        case 'area':
          return '地区';
        case 'type':
          return '类型';
        default:
          return '排序';
      }
    },
    change(t, event) {
      const value = event.target.value;
      this.params[t] = value;
      // 需要重置分页
      this.params.offset = 0;
      // 重置滚动次数
      this.scroll = 0;
      // 重置mv列表
      this.mvList = [];
      this.getAllMV();
    },
    // 跳转至详情页
    goDetail(event, id) {
      const { aid } = event.target.dataset;
      // 将选中标签信息存储到sessionStorage中,防止关闭窗口下次还是请求之前tag数据。不合理
      // sessionStorage.setItem('tagInfo', JSON.stringify(this.tagInfo));
      if (aid) {
        this.$router.push({
          name: 'artistdetail',
          query: {
            id: aid
          }
        })
      } else {
        this.$router.push({
          name: 'videodetail',
          query: {
            vid: id
          }
        })
      }
    },
  }
}
</script>

<style lang="less" scoped>
#all-mv {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 30px;
  .filtrate-list {
    display: flex;
    flex-wrap: wrap;
    // align-items: center;
    margin-top: 10px;
    .tag-name {
      width: 60px;
      color: rgba(0, 0, 0, 0.65);
    }
    /deep/.ant-radio-group {
      width: 80%;
    }
    /deep/.ant-radio-button-wrapper {
      border: none;
      margin-right: 20px;
      &:hover {
        color: #ec4141;
      }
      &::before {
        width: 0;
        background-color: transparent;
      }
    }
    /deep/label.ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
      color: #ec4141;
      border-radius: 25px;
      box-shadow: 0 0 0 0px transparent;
      background-color: #fdf5f5 !important;
    }
  }
}
</style>